import React, { Component } from 'react'

export default class App extends Component {
    a = 100

    render() {
        return (
            <div>
                <input />
                <button
                    onClick={() => {
                        console.log('click1', '如果处理逻辑过多，不推荐这种写法');
                    }}
                >add1</button>

                {/* 注意这里绑定事件回调的时候函数名后面不要加括号，加了后它会自执行 */}
                <button
                    onClick={this.handleClick2}
                >add2</button>

                <button
                    onClick={this.handleClick3}
                >add3</button>

                <button
                    onClick={() => {
                        this.handleClick4() // 比较推荐
                    }}
                >add4</button>
            </div>
        )
    }

    handleClick2() {
        console.log('click2');
    }

    handleClick3 = () => {
        console.log('click3');
    }

    handleClick4 = () => {
        console.log('click4');
    }
}


// class A {
//     constructor() {
//         this.a = 111
//         this.b = 222
//     }

//     // ES7中 类中的属性可以定义在这里
//     c = 333

//     aaa() { }

//     bbb() {
//         this.ccc()
//     }

//     ccc() { }

//     ddd = () => { }

// }
// console.log(A);
